<template>
  <div>
    <el-input placeholder="搜索成员" size="small" v-model="searchInput" suffix-icon="el-icon-search" @input="inputchange">
    </el-input>
    <div v-loading="loading" class="search-list">
      <el-checkbox-group v-model="selectItems" @change="changeCheckout">
        <el-checkbox v-if="item.show" v-for="(item, i) in list" :key="i" :label="item" :disabled="item.disabled"
          class="colleagues-list">
          <div v-photo="item" v-lazy:background-image="$options.filters.filterUserLazyImg(item.thumb_img)"
            :key="item.thumb_img" class="div-photo search-img"></div>
          <span>{{item.realname}}</span>
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {
    usersList,
    accountingList,
  } from '@/api/common'
  import {
    crmExamineFlowUserList,
    assignfieldUserlist
  } from '@/api/customermanagement/common'
  import { adminUsersIndex } from '@/api/systemManagement/EmployeeDepManagement'

  export default {
    name: 'xh-user', // 新建 user
    components: {},
    computed: {},
    watch: {
      selectedData(value) {
        this.checkItems(value)
      }
    },
    data() {
      return {
        list: [],
        selectItems: [], // 选择项
        loading: false, // 加载动画
        searchInput: ''
      }
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      /** 多选框 只能选一个 */
      radio: {
        type: Boolean,
        default: false
      },
      /** 已选信息 */
      selectedData: {
        type: Array,
        default: () => {
          return []
        }
      },
      /** 获取不同的员工展示列表 */
      infoType: {
        type: String,
        default: 'default' //返回全部  crm_contract crm_receivables oa_examine 订单审核人自选列表
      },
      infoRequest: Function,
      /** 请求辅助参数 */
      infoParams: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    mounted() {
      this.getUserList()
    },
    methods: {
      // 获取员工列表
      getUserList() {
        this.loading = true
        this.getRequest()(this.getParams())
          .then(res => {
            let arr = this.infoType == '4' ? res.data.list : res.data
            this.list = arr.map((item) => {
              item.disabled = false // 要求单选
              item.show = true
              if (this.selectedData.length > 0) {
                let disabled = true
                for (let index = 0; index < this.selectedData.length; index++) {
                  const element = this.selectedData[index]
                  if (element.id == item.id) {
                    disabled = false
                    this.selectItems.push(item)
                  }
                }
                if (this.radio) {
                  item.disabled = disabled
                }
              }
              return item
            })
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      getRequest() {
        if (this.infoRequest) {
          return this.infoRequest
        } else if (this.infoType === 'default') {
          return usersList
        } else if (this.infoType == '1' || this.infoType == '2') {
          return accountingList
        } else if (this.infoType == '3') {
          return assignfieldUserlist
        } else if (this.infoType == '4') {
          return adminUsersIndex
        } else  if (
          this.infoType === 'crm_contract' ||
          this.infoType === 'crm_receivables' ||
          this.infoType === 'oa_examine'
        ) {
          return crmExamineFlowUserList
        }
      },
      getParams() {
        let params =
          this.infoParams && Object.keys(this.infoParams.length !== 0) ?
          this.infoParams : {}
        if (this.infoType === 'default' || this.infoType === '4') {
          return params
        } else if (
          this.infoType === 'crm_contract' ||
          this.infoType === 'crm_receivables' ||
          this.infoType === 'oa_examine'
        ) {
          params.types = this.infoType
          return params
        } else {
          params.type = this.infoType
          return params
        }
      },
      changeCheckout(items) {
        if (this.radio) {
          if (items.length) {
            var element = items[0]
            this.list = this.list.map((item) => {
              if (element.id == item.id) {
                item.disabled = false
              } else {
                item.disabled = true
              }
              return item
            })
          } else {
            this.list = this.list.map((item) => {
              item.disabled = false
              return item
            })
          }
        }

        this.$emit('changeCheckout', {
          data: this.selectItems
        })
      },
      /** 取消勾选 */
      cancelCheckItem(item) {
        var removeIndex = -1
        for (let index = 0; index < this.selectItems.length; index++) {
          const element = this.selectItems[index]
          if (element.id == item.id) {
            removeIndex = index
          }
        }
        this.selectItems.splice(removeIndex, 1)
        if (this.radio && this.selectItems.length == 0) {
          this.list = this.list.map((item) => {
            item.disabled = false
            return item
          })
        }
      },
      /** 标记勾选 */
      checkItems(items) {
        this.selectItems = []
        if (items.length > 0) {
          for (let bigIndex = 0; bigIndex < this.list.length; bigIndex++) {
            const item = this.list[bigIndex]

            let disabled = true
            for (let index = 0; index < items.length; index++) {
              const element = items[index]
              if (element.id == item.id) {
                disabled = false
                this.selectItems.push(item)
              }
            }
            if (this.radio) {
              item.disabled = disabled
            }
          }
        }
      },
      // 搜索
      inputchange(val) {
        this.list = this.list.map((item) => {
          if (item.realname.indexOf(val) != -1) {
            item.show = true
          } else {
            item.show = false
          }
          return item
        })
      },
      // 清楚禁用
      clearData() {
        this.list.forEach((item) => {
          item.show = true;
          item.disabled = false
        })
      },  
    }
  }

</script>
<style lang="scss" scoped>
  /* 选择员工 */
  .search-img {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    vertical-align: middle;
    margin-right: 8px;
  }

  .search-list {
    padding: 5px;
    height: 248px;
    overflow: auto;
  }

  .colleagues-list {
    padding: 5px;
    display: block;
    margin-left: 0;
  }

</style>
